<template>
    <el-container>
        <el-header>
            <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            router
            style="padding-left: 1300px"
            >
                <el-menu-item index="/login">登录</el-menu-item>
                <el-menu-item index="/register">注册</el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
          <h2 style="font-size: 30px; text-align: center">智农系统</h2>
          <h3 style="color: #909399; text-align: center">专门为农产品消费者、农场主打造的智能系统</h3>
          <el-row>
            <el-col :offset="6" :span="12">
              <div class="block">
                <el-carousel height="400px">
                  <el-carousel-item v-for="item in this.images" :key="item.name" :name="item.name">
                    <img style="width:100%;height:100%" :src="item.url"/>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
          </el-row>
          <br>
          <br>
          <br>
          <br>
          <el-row>
            <el-col offset="2" :span="8">
              <img style="width: 125%" src="@/assets/Index1.png">
            </el-col>
            <el-col offset="6" span="4">
              <el-card shadow="hover" class="box-card">
                <div slot="header" class="clearfix">
                  <span>程序结构清晰可见</span>
                </div>
                <div>
                  <span>前后端分离</span>
                  <br>
                  <span>二级缓存</span>
                  <br>
                  <span>消息队列</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <br>
          <br>
          <el-row>
            <el-col offset="2" span="4">
              <el-card shadow="hover" class="box-card">
                <div slot="header" class="clearfix">
                  <span>八大模块助力智慧农场</span>
                </div>
                <div>
                  <span>用户模块</span>
                  <br>
                  <span>农场租赁模块</span>
                  <br>
                  <span>农产品模块</span>
                  <br>
                  <span>订单模块</span>
                  <br>
                  <span>地图模块</span>
                  <br>
                  <span>评论模块</span>
                  <br>
                  <span>消息模块</span>
                  <br>
                  <span>系统管理模块</span>
                </div>
              </el-card>
            </el-col>
            <el-col offset="2" :span="8">
              <img style="width: 175%" src="@/assets/Index2.png">
            </el-col>
          </el-row>
        </el-main>
        <el-footer>
          <br>
          技术支持：Vue.js ElementUI Redis RabbitMQ Mysql
          <br>
          @CSU.EDU.CN
        </el-footer>
</el-container>
</template>
<script>
    export default {
    name:"Index",
    data() {
      return {
        images:[
          {
            name: 'bigScreen01',
            url: require('@/assets/Farm1.jpg')
          },
          {
            name: 'bigScreen02',
            url: require('@/assets/Farm2.jpg')
          },
          {
            name: 'bigScreen03',
            url: require('@/assets/Farm3.jpg')
          },
          {
            name: 'bigScreen04',
            url: require('@/assets/Farm4.jpg')
          }
        ],
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.el-header{
  background-color: #409eff;
}
.el-footer{
  background-color: #DCDFE6;
}
</style>
